<template>
  <div>
    <div>【关键词条】</div>
    <div ref="target" class="w-full h-full"></div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue"
import * as echarts from 'echarts';
import 'echarts-wordcloud'

const props = defineProps({
  data: {
    type: Object,
    required: true
  }
})
console.log('1111', props.data)

let mChart = null

// 初始化 echarts 实例
const target = ref(null)
onMounted(() => {
  mChart = echarts.init(target.value)
  renderChart()
})
// 随机颜色
const randomRGB = () => {
  const r = Math.floor(Math.random() * 255)
  const g = Math.floor(Math.random() * 255)
  const b = Math.floor(Math.random() * 255)
  return `rgb(${r},${g},${b})`
}


// 构建option配置对象

const renderChart = () => {
  const option = {
    series: [{
      type: 'wordCloud',
      // 文字大小范围
      sizeRange: [8, 46],
      // 旋转角度
      rotationRange: [0, 0],
      // 单词间距
      gridSize: 0,
      layoutAnimation: true,
      textStyle: {
        color: randomRGB
      },
      // 选中高亮
      emphasis: {
        textStyle: {
          fontWeight: 'bold',
          color: '#fff',
          fontSize: 60
        }
      },
      data: props.data.datas
    }]
  }
  // 通过 实例.setOptions(option)
  mChart.setOption(option)
}

// 监听数据变化更新柱形图
watch(
  () => props.data,
  () => {
    renderChart()
  }
)

</script>

<style lang="scss" scoped></style>